<template>
  <div class="createReply">
    <el-form :model="replyForm" :rules="replyRules" v-loading="replyLoading" label-width="100px" ref="replyRefs" class="replyCls">
      <el-form-item label="商品：" prop="image">
        <div class="upLoadPicBox">
          <div v-if="replyForm.image && productId" class="pictrue">
            <el-image ref="initialLargePreView" class="imgHover" :src="$uploadURL(replyForm.image)" :preview-src-list="[$uploadURL(replyForm.image)]"></el-image>
            <div class="upload_cover_preview">
              <i @click.stop="largePreview('initialLargePreView')" class="iconfont icon-yanjing"></i>
              <i @click.stop="delLarge(1)" class="el-icon l-upload el-icon-delete"></i>
            </div>
          </div>
          <div @click="tabChangeGood" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
        </div>
      </el-form-item>
      <el-form-item label="用户头像：" prop="headImage">
        <div class="upLoadPicBox">
          <div v-if="replyForm.headImage" class="pictrue">
            <el-image ref="userLargePreView" class="imgHover" :src="$uploadURL(replyForm.headImage)" :preview-src-list="[$uploadURL(replyForm.headImage)]"></el-image>
            <div class="upload_cover_preview">
              <i @click.stop="largePreview('userLargePreView')" class="iconfont icon-yanjing"></i>
              <i @click.stop="delLarge(2)" class="el-icon l-upload el-icon-delete"></i>
            </div>
          </div>
          <div @click="modalPicTap('1', $event)" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
        </div>
      </el-form-item>
      <el-form-item label="用户名称：" prop="nickName">
        <el-input v-model="replyForm.nickName" type="text" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="评价文字：" prop="replyContent">
        <el-input v-model="replyForm.replyContent" type="textarea" placeholder="请输入评价文字"></el-input>
      </el-form-item>
      <el-form-item label="商品评分" prop="productScore" class="replyRateScore">
        <el-rate v-model.number="replyForm.productScore" @change="validateFieldForm('productScore')"></el-rate>
      </el-form-item>
      <el-form-item label="服务评分" prop="serviceScore" class="replyRateScore">
        <el-rate v-model="replyForm.serviceScore" @change="validateFieldForm('serviceScore')"></el-rate>
      </el-form-item>
      <el-form-item label="评论图片：">
        <div class="upLoadPicBox replyUploadPicBox">
          <div v-for="(item, index) in replyImages" :key="index" class="pictrue mr10">
            <el-image ref="replyLargePreView" class="imgHover" :src="$uploadURL(item)" :preview-src-list="[$uploadURL(item)]"></el-image>
            <div class="upload_cover_preview">
              <i @click.stop="largePreview('replyLargePreView', index)" class="iconfont icon-yanjing"></i>
              <i @click.stop="delLarge(3, index)" class="el-icon l-upload el-icon-delete"></i>
            </div>
          </div>
          <div v-if="replyImages.length < 10" @click="modalPicTap('2')" class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
        </div>
      </el-form-item>
      <el-form-item label="评论时间：" prop="createDate">
        <el-date-picker
          v-model="replyForm.createDate"
          type="datetime"
          placeholder="请选择评论时间(不选择默认当前添加时间)">
        </el-date-picker>
      </el-form-item>
      <div class="subBtnWid">
        <el-button size="mini" type="primary" @click="submitAddReply('replyRefs')" :loading="loadingBtn">提交</el-button>
      </div>
      <div class="subBtnWid">
        <el-button @click="resetForm('replyRefs')" size="mini">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    postReplyCreatApi
  } from '@/api/store';

  export default {
    name: "index",
    data() {
      const checkProductScore = (rule, value, callback) => {
        if (!value) {
          callback(new Error('商品分数不能为空'))
        } else {
          callback();
        }
      };
      const checkServiceScore = (rule, value, callback) => {
        if (!value) {
          callback(new Error('服务分数不能为空'));
        } else {
          callback();
        }
      };
      return {
        replyForm: {
          image: '',
          headImage: '',
          nickName: '',
          replyContent: '',
          productScore: 0,
          serviceScore: 0,
          createDate: ''
        },
        productId: 0,
        replyImages: [],
        replyRules: {
          image: [
            { required: true, message: '请选择商品', trigger: 'change' }
          ],
          headImage: [
            { required: true, message: '请选择用户头像', trigger: 'change' }
          ],
          nickName: [
            { required: true, message: '请填写用户名称', trigger: 'blur' }
          ],
          replyContent: [
            { required: true, message: '请填写评价内容', trigger: 'blur' }
          ],
          productScore: [
            { required: true, validator: checkProductScore }
          ],
          serviceScore: [
            { required: true, validator: checkServiceScore }
          ]
        },
        replyLoading: false,
        loadingBtn: false
      };
    },
    methods: {
      validateFieldForm(name) {
        this.$refs['replyRefs'].validateField(name);
      },
      /**
       * 选择商品
       */
      tabChangeGood() {
        const _this = this
        this.$modalGoodList(function(row) {
          _this.$set(_this, 'productId', row.id);
          _this.$set(_this.replyForm, 'image', row.image);
          _this.validateFieldForm('image');
        });
      },
      /**
       * 提交
       * @param formName 表单的ref
       */
      submitAddReply(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            postReplyCreatApi({
              productId: this.productId,
              headImage: this.replyForm.headImage,
              nickName: this.replyForm.nickName,
              productScore: this.replyForm.productScore,
              serviceScore: this.replyForm.serviceScore,
              comment: this.replyForm.replyContent,
              images: this.replyImages.join(','),
              createDate: this.replyForm.createDate
            }).then(res => {
              this.$message.success('新增成功');
              this.$emit('getReplyList');
              this.$emit('close');
              this.$set(this, 'loadingBtn', false);
            }).catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$set(this, 'replyImages', []);
      },
      // 删除图片
      delLarge(num = 1, index = 0) {
        switch (num) {
          case 1:
            this.$set(this, 'productId', 0);
            this.$set(this.replyForm, 'image', '');
            break;
          case 2:
            this.$set(this.replyForm, 'headImage', '');
            break;
          case 3:
            this.replyImages.splice(index, 1);
            break;
        }
      },
      // 大图预览
      largePreview(ref, index = -99) {
        index == -99 ? this.$refs[ref].clickHandler() : this.$refs[ref][index].clickHandler();
      },
      modalPicTap(num, e) {
        const _this = this
        _this.$modalUpload(function(img) {
          if (num == 1) {
            _this.$set(_this.replyForm, 'headImage', img[0].path);
            _this.validateFieldForm('headImage');
          } else {
            for (let i in img) {
              if (i < 10) {
                _this.replyImages.push(img[i].path);
                continue;
              };
              break;
            }
          }
        }, num, 'store')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .replyRateScore{
    ::v-deep.el-rate{
      line-height: 2.4;
      height: 36px;
    }
    ::v-deep.el-form-item__content {display: flex}
  }
  .replyUploadPicBox {
    display: flex !important;
    flex-wrap: wrap;
    .imgHover {
      flex-shrink: 0;
    }
  }
</style>
